<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="小区" prop="areaName">
        <el-select v-model="queryParams.areaName":filter-method="filterMethod" placeholder="请输入小区" filterable allow-create
                   clearable size="small" @change="getGroup(queryParams.areaName)" default-first-option>
          <el-option v-for="(item, index) in areaIdOptions" :key="index" :label="item.areaName"
                     :value="item.areaName" :disabled="item.disabled" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼宇" prop="groupName">
        <el-select v-model="queryParams.groupName" placeholder="请输入楼宇" clearable size="small" >
          <el-option v-for="(item, index) in groupIdOptions" :key="index" :label="item.groupName"
                     :value="item.groupName" :disabled="item.disabled" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="new-list-box">
      <div v-for="(item,index) in list.louyu" :key="index" class="lou-box">
        <div class="dy-out-box">
          <div v-for="(el,i) in item.danyuan" :key="i" class="dy-box">
            <div v-for="(o,j) in el.hu" :key="j" class="hu-box">
              <div :class="'color_'+o.type" @click.capture="handleUpdate(o.doorId)">{{o.doorName}}</div>
            </div>
          </div>
        </div>
        <div class="unit-box">
          {{item.shunxu}}
        </div>
      </div>
    </div>
    <div class="color-list">
      <span><span class="bg-span size_color_0"></span>(红色)已建户，已缴费</span>
      <span><span class="bg-span size_color_1"></span>(绿色)已建户，未缴费</span>
      <span><span class="bg-span size_color_2"></span>(白色)未建户</span>
    </div>

    <!-- 查看缴费记录 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小区" prop="areaName">
              <el-select v-model="form.areaName":filter-method="filterMethod" placeholder="" filterable allow-create
                         clearable :style="{width: '100%'}" @change="getGroup(form.areaName)" default-first-option :disabled="noWrite">
                <el-option v-for="(item, index) in areaIdOptions" :key="index" :label="item.areaName"
                           :value="item.areaName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="楼宇" prop="groupName">
              <el-select v-model="form.groupName" placeholder="" clearable :style="{width: '100%'}" @change="getUnit(form.areaName,form.groupName)" :disabled="noWrite">
                <el-option v-for="(item, index) in groupIdOptions" :key="index" :label="item.groupName"
                           :value="item.groupName"  :disabled="noWrite"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单元" prop="unitName">
              <el-select v-model="form.unitName" placeholder="" clearable :style="{width: '100%'}" :disabled="noWrite">
                <el-option v-for="(item, index) in unitNameOptions" :key="index" :label="item.unitName"
                           :value="item.unitName" :disabled="noWrite" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="户" prop="doorName">
              <el-input v-model="form.doorName" placeholder="" :disabled="noWrite"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="面积" prop="space" >
              <el-input  v-model="form.space" placeholder=""  :disabled="noWrite"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资金系数" prop="purposeMoney">
              <el-select v-model="form.purposeMoney" placeholder="" :style="{width: '100%'}" :disabled="noWrite">
                <el-option
                  v-for="dict in dict.type.HOUSE018"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="建筑成本" prop="buildMoney">
              <el-select v-model="form.buildMoney" placeholder="" :style="{width: '100%'}" :disabled="noWrite">
                <el-option
                  v-for="dict in dict.type.HOUSE019"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应缴金额" prop="budgetMoney" >
              <el-input  v-model="form.budgetMoney" placeholder="" :disabled="noWrite"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用途" prop="purposeId">
              <el-select v-model="form.purposeId" placeholder="" clearable :style="{width: '100%'}" :disabled="noWrite">
                <el-option v-for="(item, index) in purposeOptions" :key="index" :label="item.purposeName"
                           :value="item.purposeId" :disabled="item.disabled" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="userName">
              <el-input v-model="form.userName" placeholder="" :disabled="noWrite"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电话" prop="tel">
              <el-input v-model="form.tel" placeholder="" :disabled="noWrite"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号码" prop="papersCode">
              <el-input v-model="form.papersCode" placeholder="" :disabled="noWrite"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>


<script>
import { getList, getAreaInfo, getGroupInfo,getAreaInfo1 } from "@/api/report/blockPlan";
import { getDoor, getUnitInfo, getPurposeInfo} from "@/api/house/door";
export default {
  dicts: ['COST001', 'COST002','COST003'],
  data() {
    return {
      showSearch: true,
      loading: true,
      areaIdOptions:[{}],
      groupIdOptions:[{}],
      open: false,
      noWrite: true,
      title: "",
      queryParams: {
        areaName: null,
        groupName: null,
        unitName: null,
      },
      form: {},
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        houseId: null,
        costDate: null,
        costSts: null,
        costWay: null,
        checkSts: null,
        billNo: null,
      },
      costQueryList: [],
      unitNameOptions:[{}],
      purposeOptions:[{}],
      // 表单重置
      reset() {
        this.form = {
          doorId: null,
          houseMoney: null,
          areaName: null,
          groupName: null,
          unitName: null,
          doorName: null,
          houseId: null,
          space: null,
          spaceSts: null,
          purposeId: null,
          userName: null,
          tel: null,
          papersCode: null,
          budgetMoney: null,
          purposeMoney: null,
          buildMoney: null,
          costMoney: null,
          costDate: null,
          costSts: null,
          balance: null,
          rateType: null,
          rateMoney: null,
          rateDate: null,
          creater: null,
          createDate: null,
          remark: null
        };
        this.formDoor = {
          areaName: null,
          groupName: null,
          unitName: null,
          doorName: null
        };
        this.resetForm("form");
      },
      list:{
        "louyu": [{
          "danyuan": [{
            "hu": [{
              "doorId": "0101",
              "type": "0"
            }, {
              "doorId": "0201",
              "type": "2"
            }, {
              "doorId": "0301",
              "type": "1"
            }, {
              "doorId": "0401",
              "type": "1"
            }, {
              "doorId": "0501",
              "type": "0"
            }],
            "weizhi": "1"
          }, {
            "hu": [{
              "doorId": "0102",
              "type": "0"
            }, {
              "doorId": "0202",
              "type": "2"
            }, {
              "doorId": "0302",
              "type": "1"
            }, {
              "doorId": "0402",
              "type": "1"
            }],
            "weizhi": "1"
          }],
          "shunxu": "一单元"
        }, {
          "danyuan": [{
            "hu": [{
              "doorId": "0101",
              "type": "0"
            }, {
              "doorId": "0201",
              "type": "2"
            }, {
              "doorId": "0301",
              "type": "1"
            }, {
              "doorId": "0401",
              "type": "1"
            }],
            "weizhi": "1"
          }, {
            "hu": [{
              "doorId": "0102",
              "type": "0"
            }, {
              "doorId": "0202",
              "type": "2"
            }, {
              "doorId": "0302",
              "type": "1"
            }, {
              "doorId": "0402",
              "type": "1"
            }],
            "weizhi": "1"
          }],
          "shunxu": "二单元"
        }]
      },
      rules: {}
    }
  },
  created() {
    this.getList();
    this.filterMethod();
    this.areaSelect();
    this.purposeSelect();
  },
  methods: {
    filterMethod(val){
      this.value=val
      getAreaInfo1(this.value).then(response => {
        this.areaIdOptions = response.rows;
      });
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.areaSelect();
      this.getList();
    },
    handleQuery() {
      this.getList();
    },
    areaSelect(){
      getAreaInfo().then(response => {
        this.areaIdOptions = response.rows;
      });
    },
    getGroup(areaName){
      if(areaName!="") {
        getGroupInfo(areaName).then(response => {
          this.groupIdOptions = response.rows;
        });
      }
    },
    getUnit(areaName,groupName){
      getUnitInfo(areaName,groupName).then(response => {
        this.unitNameOptions = response.rows;
      });
    },
    purposeSelect(){
      getPurposeInfo().then(response => {
        this.purposeOptions = response.rows;
      });
    },
    getList(){
      getList(this.queryParams).then(response => {
        this.list.louyu = response.rows
        this.areaSelect();
      })
    },
    handleUpdate(row) {
      const doorId = row
      if(doorId!=null){
        getDoor(doorId).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "户管理";
        });
      }
    },
  }
}
</script>
<style scoped>
.hasTagsView .app-main {


}
.app-container{
  min-height: 100%;
  background: url("./img/bui-bg.jpg");
  background-size: 100% 100%;
}
.color_0{
  width: 100%;
  display:block!important;
  font-size: 14px !important;
  color:#f31616;
  background: #69849d;
  border: 3px solid #2b3d72;
  padding: 3px 0;



}
.color_1{
  width: 100%;
  display:block!important;
  font-size: 14px !important;
  color:#70c90f;
  background: #69849d;
  border: 3px solid #2b3d72;
  padding: 3px 0;


}
.color_2{
  width: 100%;
  display:block!important;
  font-size: 14px !important;
  color:#fff;
  background: #69849d;
  border: 3px solid #2b3d72;
  padding: 3px 0;


}


.size_color_0{
  display:block;
  background:#f31616
}
.size_color_1{
  display:block;
  background:#70c90f
}
.size_color_2{
  display:block;
  background:#fff;
}



.new-list-box{
  display:flex;
  align-items: flex-end;
  overflow-x:auto;
}
.dy-box{
  flex-direction:column-reverse;
  display:flex;
  flex:1
}
.new-list-box .lou-box:nth-child(2n+2) .dy-out-box{
  background: #cea257 !important;
  border-top: 14px solid #6c6e6e;
}
.lou-box{
  flex:1
}
.lou-box:nth-child(1){
  flex:1
}
.lou-box:nth-child(2){
  flex-grow: 1
}
.lou-box:nth-child(3){
  flex:1
}
.lou-box:nth-child(4){
  flex-grow: 1;
}
.lou-box:nth-child(5){
  flex-grow: 1;
}

.unit-box{
  display:block;
  /*border:1px solid #eee;*/
  background:#0d4d70;
  color:#fff;
  text-align:center;
  justify-content: center;
  line-height:30px;
  white-space: nowrap;

}
.dy-out-box{
  display:flex;
  flex-direction:row;
  background: #faca82;
  border-top: 14px solid #757575;
}
.hu-box{
  display:block;
  /*border:1px solid #eee;*/
  color:#fff;
  text-align:center;
  padding: 10px 15px;
}
.door-box{
  width: 100%;
  display:block!important;
  font-size: 14px !important;
  background: #69849d;
  border: 3px solid #2b3d72;
  padding: 3px 0;
}
.color-list{
  font-size:14px;
  text-align:left;
  margin:10px 0 20px 0;
}
.color-list>span{
  margin-left:20px;
}
.bg-span{
  padding:5px;
  margin-right:3px;
  display:inline-block;
  width:0;
  border:1px solid #ddd
}
</style>
